<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file</title>
    <script src="./jquery.min.js"></script>
    <script>
        function doSend() {
            // 把form对象作为参数传入 FormData
            var formdata = new FormData($("#f1")[0]);
            $.ajax({
                url: "/wbs20052/ajax/day02/upload.php",
                type:"post",
                dataType: "text",
                data: formdata,
                // content-type 必须设置为文件上传格式
                contentType: false,
                // 不对参数进行格式化，保留参数原有格式
                processData: false,
                xhr: function(){
                    // 获取当前jquery创建的原生ajax对象
                    var myxhr = $.ajaxSettings.xhr();

                    // 监听 文件上传进度
                    myxhr.upload.onprogress = function(event){
                        if(event.lengthComputable){
                            // 计算 百分比
                            var per = Math.ceil((event.loaded/event.total)*100);
                            document.getElementById("pg").value = per;
                            if(per >= 100){
                                alert("上传完成");
                            }
                        }
                    };

                    // 必须返回 原生ajax对象
                    return myxhr;
                },
                success: function(result){
                    // 预览
                    $("#showImage").prop("src", result);
                },
                error: function(){
                    alert("error");
                }
            });
        }
    </script>
</head>
<body>
    <form id="f1">
        用户名：<input type="text" id="u" name="username"> <br>
        头像：<input type="file" id="h" name="headImage"> <br>
        <progress id="pg" max="100" value="0" ></progress> <br>
        <input type="button" value="doSend" onclick="doSend()">
    </form>
    <div>
        <img src="" id="showImage" style="width: 200px;" alt="no image">
    </div>
</body>
</html>